Module 為模組，當網頁的程式碼越來越多，越來越龐大的時候，會需要把 code 拆分為很多個部分，把每個部分變成獨立的模組來使用，避免檔案過大，而在每個檔案中可以匯入其他模組來做使用，也可以匯出模組讓其他檔案使用。

• 匯出的方式為 export，且分為 named export（具名匯出）和 default export（預設匯出）。
• named export 在 module 中可以有很多個，但 default export 只能有一個。
• 匯入的方式為 import
• 要在 <script> 中把 type 設定成 module：<script type="module">。
• module 可以是 function, array, object, variable...等等。

當只有一個 module 時
例如：匯出 index.js 中的 HELLO 這個變數，並在 app.js 匯入 HELLO 來使用

// index.js
export const HELLO = 'Hello';

// app.js
import { HELLO } from './index.js';
console.log(HELLO); // "Hello"

當有多個 module 時
例如：匯出 index.js 中的 HELLO, PEOPLE 這兩個變數，也匯出 sayHi 這個函式

// index.js
export const HELLO = 'Hello';
export const PEOPLE = ['Bob', 'Jen', 'Amy'];
export function sayHi(user) {
  console.log(`Hello, ${user}!`);
}

或者也可以先宣告，再一起匯出，像這樣：

// index.js
const HELLO = 'Hello';
const PEOPLE = ['Bob', 'Jen', 'Amy'];
function sayHi(user){
    console.log(`Hello, ${user}!`);
}
export { HELLO, PEOPLE, sayHi };

在 app.js 匯入 index.js 的 module

// app.js
import { HELLO, PEOPLE, sayHi } from './index.js';
console.log(HELLO); // "Hello"
console.log(PEOPLE); // ['Bob', 'Jen', 'Amy']
sayHi("John"); // Hello, John!

可以利用 as 來修改 module 名稱

• export 中的用法

例如：將 index.js 中的 HELLO 和 sayHi 在匯出時改成 GREET 和 Hi

// index.js
const HELLO = 'Hello';
function sayHi(user){
    console.log(`Hello, ${user}!`);
}
export { HELLO as GREET,sayHi as Hi }

在 app.js 中匯入 GREET 和 Hi

// app.js
import { GREET, Hi } from './index.js';
console.log(GREET); // "Hello"
Hi("Mary"); // Hello, Mary!

• import 中的用法
  例如：匯出 index.js 中的內容，並在 app.js 將其匯入時修改

// index.js
const HELLO = 'Hello';
function sayHi(user){
    console.log(`Hello, ${user}!`);
}
export { HELLO, sayHi }

// app.js
import { HELLO as GREET, sayHi as Hi } from './index.js';
console.log(GREET); // "Hello"
Hi("Mary"); // Hello, Mary!

如果有很多要導入的內容，可以使用 import * as <obj>

// index.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}
function sayBye(user) {
  alert(`Bye, ${user}!`);
}
export {sayHi, sayBye};

// app.js
import * as say from './index.js';
say.sayHi('Mary'); // Hello, Mary!
say.sayBye('John'); // Bye, John!

default export
前面介紹的都是具名匯出，接著來介紹預設匯出，這種方式不需要有名稱（不用變數）就可以直接匯出，但要注意的是每個文件可能只有一個 export default，且匯入時不需要使用大括號 { }。
例如：

// index.js
export default 'Hi';

export dafault 不需要變數名稱且唯一，所以在匯入 default export 時取任意名字都能找到它

// app.js
import a from './index.js';
console.log(a); // Hi

or

// index.js
let name = "Lisa";
export default name;

// app.js
import name from './index.js';
console.log(name); // Lisa

參考資料：
https://zh.javascript.info/import-export